<template>
  <div class="communication">
    <div class="communication-header">
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/user/home/menu' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>案件交流</el-breadcrumb-item>
      </el-breadcrumb> -->
      <el-button @click="$router.push('/admin/myNews/notice')">站内公告</el-button>
    </div>
    <div :class="isNODetails ? 'communication-content clearfloat' : 'communication-content clearfloat noDetails'">
      <div class="content_list">
        <div class="header item clearfloat">
          <el-checkbox v-model="delChecked" @change='AllDelChange'></el-checkbox>
          <div class="fr mr20"> 
            <el-button @click="addNews" class="addBtn">添加</el-button>
            <el-button @click="determineDel" :class="getDelSums > 0 ? 'is_activity' : '' ">删除</el-button>
          </div>
          
        </div>
        <div class="list" @scroll="showScrolbar" @mouseleave='hidScrolbar' id="listDOM">
          <div 
            :class='isDirectReadOrNo(item.num) ? "item list_item read" : "item list_item"' 
            v-for="(item,index) in newsData" 
            :key="index"
            @mouseenter="showOpenDetails(item)" 
            @click="openDeatils(item)">
            <div @click.stop>
              <el-checkbox v-model="item.delChecked" ></el-checkbox>
            </div>
            <span class="time">{{item.lastRCreatedAt | communicationTime}}</span>
            <span class="order_number" v-html="item.order_number"></span>
            <div class="info">
              <el-tooltip :content="item.name" placement="top" effect="light">
                <span class="title">{{item.name}}</span>
              </el-tooltip>
              <br/>
              <span class="abstract">{{item.news}}</span>
            </div>
            <div class="openDetails" v-show="item.showOpenDetails" @click.stop="closeOpenDetails(item.showOpenDetails, index)">
              <i :class="item.openDetails ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
            </div>
            <span class="tag" ></span>
          </div>
        </div>
        <div class='search'>
          <el-input
            placeholder="查找订单编号"
            @change='search'
            v-model="headerText">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
      <div class="content_details" v-if='isNODetails'>
        <div class="head">
          <div 
            v-for="(item,index) in roleContent" 
            :key="index" 
            :class="index == 0 ? 'item is_active' : 'item'" 
            ref="role_item" 
            @click="tabsChange(index,item)">
            <span>{{item.label}}</span>
            <span :class="isDirectReadOrNo(item.num) ? 'noRead' : 'isRead'"></span>
          </div>
        </div>
        <div class="content">
          <div class="orderInfo-warp">
            <div class="orderInfo">
              <div class="orderInfo_header clearfloat" @click="showorder = !showorder" >
                <span class="fl">订单信息</span>
                <i :class="showorder ? 'el-icon-arrow-up fr' : 'el-icon-arrow-down fr'"></i>
              </div>
              <div class="orderInfo_noShow">
                <el-row>
                  <el-col :span="8" ><span >{{orderData.order_number}}</span></el-col>
                  <el-col :span="8" class="textHid"><span>{{orderData.order ? orderData.name : orderData.patent_name}}</span></el-col>
                  <el-col :span="8" ><span >{{orderData.status}}</span></el-col>
                </el-row>
              </div>
              <el-collapse-transition>
                <div v-show="showorder">
                  <p class="texts">{{orderData.order ? orderData.order.problem : orderData.problem}}</p>
                  <p class="texts">{{orderData.order ? orderData.order.plan : orderData.plan}}</p>
                  <p class="texts">{{orderData.order ? orderData.order.advantage : orderData.advantage}}</p>
                </div>
              </el-collapse-transition>
            </div>
          </div>
          
          <div :class="showorder ? 'message-warp showorder' : 'message-warp'" ref="messageWarp">
            <div 
              v-for='(item,index) in messageData.son_news' :key="index" 
              :class="item.send_id == $store.state.user.id ? 'item right_item clearfloat' : 'item clearfloat'">
              <el-avatar :size="45" :src="baseUrl + '/storage/upload/' + $store.state.user.img" v-if="item.send_id == $store.state.user.id"></el-avatar>
              <el-avatar :size="45" :src="baseUrl + '/storage/upload/' + messageData.user_img" v-else></el-avatar>
              <span class="time">{{item.created_at | communicationTime}}</span>
              <span v-if="item.img" class="img">
                <el-image 
                  style="width: 100px; height: 100px"
                  :src="baseUrl + '/storage/upload/' + item.img_thumb" 
                  :preview-src-list="[baseUrl + '/storage/upload/' + item.img]">
                </el-image>
              </span>
              <span v-else-if="item.file" class="file">
                <a class="clearfloat" :href="baseUrl+'/api/download?path=' + JSON.parse(item.file).path">{{JSON.parse(item.file).name}}
                  <!-- <div class="fl">
                    <span class="name">{{JSON.parse(item.file).name}}</span><br/>
                    <span class="size">{{JSON.parse(item.file).fileSize}}</span>
                  </div>
                  <div class="fr file_icon">
                    <i class="el-icon-document icon"></i>
                  </div> -->
                </a>
              </span>
              <span v-else-if="item.news" class="news">{{item.news}}</span>
            </div>
          </div>     
        </div>
        <div class="bottom">
          <div class="header">
            <el-upload
              class="upload mr20"
              action=""
              multiple
              :limit="1"
              ref="fileUploadRef"
              :on-remove="fileRemove"
              :on-change="fileChange"
              :http-request="uploadSectionFile"
              :show-file-list='false'
              :file-list="fileList">
              <i class="el-icon-folder-opened icon"></i>
            </el-upload>
            <el-upload
              class="upload"
              ref="imgUploadRef"
              action=""
              :on-preview="imgPreview"
              :on-remove="imgRemove"
              :on-change="imgChange"
              :http-request="uploadSectionFile"
              :file-list="imgList"
              :limit="1"
              :show-file-list='false'
              list-type="picture">
              <!-- <el-button size="small" icon="el-icon-picture-outline"></el-button> -->
              <i class="el-icon-picture-outline icon"></i>
            </el-upload>
          </div>
          <div class="bottom_content">
            <el-input
              v-if ='!fileListShow.length && !imgListShow.length'
              ref="sendInput"
              type="textarea"
              v-model="sendMessage">
            </el-input>
            <div v-if="fileListShow.length" class="mb20">
              <div 
                v-for="(item,index) in fileListShow" 
                :key="index" 
                @mouseenter='fileListShowClose(item)' @mouseleave='fileListHidClose(item)'
                class="files">
                <div class='close' v-if='item.close'>
                  <i class="el-icon-close" @click="closeFileList(item,index,fileListShow,'fileUploadRef')"></i>
                </div>
                <i class="el-icon-document"></i>
                <el-tooltip effect="dark" :content="item.name" placement="bottom-start">
                  <span class="name">{{item.name}}</span>
                </el-tooltip>
                
              </div>
            </div>
            <div v-if="imgListShow.length" class="mb20">
              <div 
                v-for="(item,index) in imgListShow" 
                :key="index"
                @mouseenter='fileListShowClose(item)' @mouseleave='fileListHidClose(item)'
                class="imgs">
                <div class='close' v-if='item.close'>
                  <i class="el-icon-close" @click="closeFileList(item,index,imgListShow,'imgUploadRef')"></i>
                </div>
                <el-image
                  style="width: 70px; height: 70px"
                  :src="item.url"
                  fit="fill">
                </el-image>
              </div>
            </div>
            
          </div>
          <div class="bottom_bottom clearfloat">
            <el-button @click="submitMessage" class="submit fr">发送</el-button>
          </div>
          
        </div>
      </div>

      <div class="content_details fl" v-else>
        <span class="nomessage">当前对话框暂无消息</span>
      </div>
    </div>
    <addNews  ref='addNews' @refresh='getData'/>
  </div>
</template>

<script>
import axios from "axios";
import addNews from './components/addDirect'
export default {
  components: {
    addNews
  },
  data () {
    return {
      headerText: '',
      delChecked:false,
      newsData: [],
      listDOM: {},
      isNODetails: false,
      noticeDetails: {},
      replyUser: null,
      roleContent: [],
      loading: {},
      imgList: [],
      imgListShow: [],
      fileListShow: [],
      fileList: [],
      activeNames: 1,
      messageData: [],
      orderData: {},
      circleUrl: '/_nuxt/assets/img/avatar.png',
      showorder: false,
      sendMessage: '',
      isOrder: false,
      baseUrl: global.baseurl,
      noMore: false,
      page: 1,
      paramsNews: {
        page: 1,
        perPage: 10
      }
    }
  },

  mounted () {
    if(process.client) {
      this.listDOM = document.getElementById('listDOM') 
      this.listDOM.addEventListener('scroll', () => {
      // 滚动距离
      let scrollTop = this.listDOM.scrollTop
      // 变量windowHeight是可视区的高度
      let windowHeight = this.listDOM.clientHeight || this.listDOM.clientHeight
      // 变量scrollHeight是滚动条的总高度
      let scrollHeight = this.listDOM.scrollHeight || this.listDOM.scrollHeight
      if (scrollTop + windowHeight === scrollHeight) {
        // 获取到的不是全部数据 当滚动到底部 继续获取新的数据

        if (!this.noMore) {
          this.load()
        }
      }
    })
    }
  },
  computed: {
    getDelSums () {
      let delData = this.newsData.filter((item)=> item.delChecked )
      return delData.length
    },
  },
  watch: {
    newsData: {
      handler: function(val) {
        let isAllDel = val.some(v => v.delChecked == false)
        if (isAllDel) {
          this.delChecked = false
        }
      },
      deep: true
    },
    noticeDetails: {
      handler: function (val) {   
        let roles = []
        Object.keys(val).forEach( key => {
          let obj = {
            label: key,
            num: val[key].num,
            role_id: key
          }
          if (key == 5) {
            obj.label = '发明人'
          } else if (key == 4) {
            obj.label = '流程员'
          } else if (key == 3) {
            obj.label = '审核员'
          } else if (key == 2) {
            if (this.$store.state.user.is_teacher && this.$store.state.user.is_teacher == 1) {
              obj.label = '徒弟'
            } else if (this.$store.state.user.is_teacher && this.$store.state.user.is_teacher == 2) {
              obj.label = '导师'
            } else {
              obj.label = '代理人'
            }
          }
          roles.push(obj)
        })
        this.roleContent = roles
      },
      deep: true
    },
    messageData: {
      handler: function (val) {   
        if (val) {
          this.$nextTick (() => {
            this.scrollEnd()
          })
        }
      },
      deep: true
    }
  },
  created () {
    this.getData(this.paramsNews)
  },
  methods: {

    fileRemove () {

    },
    fileChange (file, fileList) {

      if (this.imgListShow.length || this.sendMessage != '') {
        this.$alert('请将输入框消息发送后上传文件', '提示', {
          confirmButtonText: '确定',
          center:true,
          callback: action => {
          }
        })
        this.fileList = []
      } else {
        this.fileListShow = fileList
        for (let i = 0; i < this.fileListShow.length; i++) {
          this.$set(this.fileListShow[i],'close', false)
        }
      }
    },
    imgChange (file, fileList) {
      if (this.fileListShow.length || this.sendMessage != '') { 
        this.$alert('请将输入框消息发送后上传图片', '提示', {
          confirmButtonText: '确定',
          center:true,
          callback: action => {
          }
        })
        this.imgList = []
      } else {
        this.imgListShow = fileList
        for (let i = 0; i < this.imgListShow.length; i++) {
          this.$set(this.imgListShow[i],'close', false)
        }
      }
      
    },
    imgPreview () {

    },
    imgRemove () {

    },
    fileListHidClose (item) {
      item.close = false
    },
    fileListShowClose (item) {
      item.close = true
    },
    closeFileList(item,index,files,refName) {
      files.splice(index, 1)
      this.$refs[refName].uploadFiles.splice(index, 1)
    },
    // isDirectReadOrNo (value) {
    //   if (value > 0) {
    //     return true;
    //   } else {
    //     return false;
    //   }
    // },
    isloading(domName) {
      this.loading = this.$loading({
        lock: true,
        text: '数据加载中。。。',
        spinner: 'el-icon-loading',
        background: 'rgba(255,255,255,.9)',
        target: document.querySelector(domName)
      })
    },
    tabsChange (index, item) {
      // console.log(this.$refs[ref])
      let tabsRefs =  this.$refs['role_item']
      for (let i = 0; i < tabsRefs.length; i++) {
        // 
        if (i == index) {
          tabsRefs[i].classList.add('is_active')
        } else {
          tabsRefs[i].classList.remove("is_active")
        }
      }
      this.$nextTick( () => {
        this.$refs['sendInput'].focus()
      })
      
      this.messageData = this.noticeDetails[item.role_id]
    },
    sortingSonNews (data) {
      Object.keys(data).forEach( key => {
        let firstMessage = {
          created_at: data[key].created_at,
          remarks: data[key].remarks,
          file: data[key].file,
          img: data[key].img,
          news: data[key].news,
          replyUserName: data[key].replyUserName,
          send_id: data[key].send_id
        }
        data[key].son_news.reverse()
        if (!data[key].is_del) {
          data[key].son_news.unshift(firstMessage)
        }
      })
    },
    // 搜索
    search(val) {
      let params = {
        order_number: val
      }
      this.getData(params, true)
      this.isNODetails = false
      
    },
    // 添加
    addNews () {
      this.$refs['addNews'].show()
    },
    // 发送消息
    submitMessage () {
      if (this.sendMessage != '' || this.imgListShow.length || this.fileListShow.length) {
        let form = new FormData()
        form.append('receive_uid', this.messageData.replyId)
        if (this.isOrder) {
          form.append('order_id', this.orderData.id)
        } else {
          form.append('finals_id', this.orderData.id)
        }
        if (this.sendMessage != '') {
          form.append('news', this.sendMessage)
        } else if (this.imgListShow.length) {
          form.append('img', this.imgListShow[0].raw)
        } else if (this.fileListShow.length) {
          let size = (this.fileListShow[0].size / 1024).toFixed(2)
          if (size > 1024) {
            size = (size / 1024).toFixed(2) + 'MB'
          } else {
            size = size + 'KB'
          }
          form.append('file', this.fileListShow[0].raw)
          form.append('file_size', size)
        }

        this.submitMessagePost(form)
        
      } else {
        this.$message({
          type: 'warning',
          message: '请输入回复内容'
        })
      }
    },
    submitMessagePost (params) {
      axios({
        method: "post",
        url: this.baseUrl + '/api/news/add_private_letter',
        data: params,
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: "Bearer " + this.$store.state.token
        }
      }).then(res => {
        if (res.data.code == 200) {
          let item = {}
          if (this.isOrder) {
            item.order_id = this.orderData.id
          } else {
            item.finals_id = this.orderData.id
          }
          this.openDeatils(item)
          this.closeSend()
          this.getData(this.paramsNews)
        } else {
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            center:true,
            callback: action => {
            }
          })
        }
      })

    },
    /**
     *  设置搜索标题字段高亮
     * @param resultsList {Array} 匹配用的数组
     */
    searchHighilight(resultsList) {
      resultsList.map((item, index) => { 
        if (this.headerText && this.headerText.length > 0) { 
          let replaceReg = new RegExp(this.headerText, 'g')
          // 高亮替换v-html值
          let replaceString =
            '<span class="highilight">' + this.headerText + '</span>'
          resultsList[index].order_number = item.order_number.replace(
            replaceReg,
            replaceString
          )
        }
      })
      this.newsData = []
      this.newsData = resultsList
    },
    // 删除
    determineDel() {
      if (this.getDelSums == 0) {
        this.$alert('请至少选择一条消息', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
        return
      } else {
        let delData = this.newsData.filter((item)=> item.delChecked )
        let delDataCheckedOrder = []
        let delDataCheckedFinal = []
        for (let i = 0; i <delData.length; i++) {
          if(delData[i].finals_id) {
            delDataCheckedFinal.push(delData[i].finals_id)
          } else {
            delDataCheckedOrder.push(delData[i].order_id)
          }
        }
        delDataCheckedOrder.join(",")
        delDataCheckedFinal.join(",")
        this.$confirm(`<span>确认删除 <i class="font_danger">${this.getDelSums}</i> 条记录吗</span>`, '删除消息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          center: true,
          type: 'warning'
        }).then(() => {
          this.delRequest(delDataCheckedOrder,delDataCheckedFinal)
        }).catch(() => {
        })
      }
      
    },
    delRequest (orders, finals) {
      let params = {}
      if (orders && orders.length) {
        params.order_id = orders
      } 
      if (finals && finals.length) {
        params.finals_id	= finals
      }
      this.$axios.put(`api/news/del_news`, params).then( res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message:'删除成功'
          })
          this.getData()
          this.isNODetails = false
        } else {
          // this.$message.error()
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
        }
      })
    },
    // 查看详情
    openDeatils(item) {
      let params = {}
      if (item.order_id) {
        params.order_id = item.order_id
      } else {
        params.finals_id = item.finals_id 
      }

      // this.$nextTick(() => { 
      //   if (!this.isNODetails) {
      //     this.isloading('.content_details')
      //   }
        

      // })
      this.isNODetails = true

      this.$axios.get(`api/news/see_all_news`,{params: params}).then(res => {
        if (res.data.code == 200) {
          this.showorder = false
          for (let i = 0; i < this.newsData.length; i++) {
            if (this.newsData[i].id == item.id) {
              this.$set(this.newsData[i],"openDetails", true)
            } else {
              this.$set(this.newsData[i],"openDetails", false)
            }
          }
          this.noticeDetails = res.data.data
          if (item.num > 0) {
            this.readMessage(params)
          }
          // 处理消息数据
          this.sortingSonNews(this.noticeDetails)
          // 获取选中角色消息
          this.getSelectRole()

          this.$refs['sendInput'].focus()

          //   this.scrollEnd()
          if (res.data.order) {
            this.orderData = res.data.order
            this.isOrder = true
          } else {
            this.orderData = res.data.final
          }

          // 滚动条置底
          // this.$nextTick(() => {
          // })
        } else {
          this.loading.close()
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            center:true,
            callback: action => {
            }
          })
        }
      })
    },

    // 获取选中角色数据
    getSelectRole () {
      this.$nextTick (() => {
        if (this.$refs['role_item']) {
          let doms = this.$refs['role_item']
          for (let i = 0; i < doms.length; i++) {
            for (let j = 0; j < doms[i].classList.length; j++) {
              if(doms[i].classList[j] == 'is_active') {
                this.messageData = this.noticeDetails[this.roleContent[i].role_id]
                break;
              } 
            }
          }
        } 
      })
    },

    // 读取消息
    readMessage(params) {
      // console.log(params)
      this.$axios.put(`api/news/set_pr_read`, params).then(res => {
        if (res.data.code == 200) {
          // this.$emit('refresh')
          this.getData(params)
          // this.openDeatils(params)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 判断是否已读
    isDirectReadOrNo (value) {
      if (value > 0) {
        return true;
      } else {
        return false;
      }
    },
    /**
     * 获取公告数据
     * @param args {Object} 获取数据传值参数
     * @param highilight {Boolean} 是否高亮 查询标题的时候用
     * @param scrollData {Boolean} 是否是滚动加载
     */
    getData(args, highilight,  scrollData) {
      let params = {}
      if (args) {
        params = {...this.paramsNews, ...args, }
        this.isNODetails = true
      }
      // this.$nextTick(() => { 
      //   if (process.client) {
      //     this.isloading('.communication-content')
      //   }
      // })
      this.$axios.get('api/news/get_order_pr_news', {params: params}).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data
          for (let i = 0; i < data.length; i++) {
            this.$set(data[i],"delChecked", false)
            this.$set(data[i],"openDetails", false)
            this.$set(data[i],"showOpenDetails", false)
          }
          // this.isNODetails = false

          // 搜索查询高亮
          if (highilight) {
            this.searchHighilight(this.newsData)
          }
          // 滚动加载
          if (scrollData) {
            if (data.length == 0) {
              this.noMore = true
            }
            this.newsData = this.newsData.concat(data)
          } else {
            this.newsData = data
            this.listDOM.scrollTop = this.listDOM.scrollTop - 100
          }
        } else {
          this.$alert(res.data.message, '提示', {
            confirmButtonText: '确定',
            center:true,
            callback: action => {
            }
          })
        }
      })
    },
    // 全选
    AllDelChange(val) {
      for (let i = 0; i < this.newsData.length; i++) {
        this.$set(this.newsData[i],"delChecked", val)
      }
    },
    // 显示列表滚动条
    showScrolbar () {
      this.listDOM.classList.add("showScrolbar")
    },
    // 隐藏滚动条
    hidScrolbar () {
      this.listDOM.classList.remove("showScrolbar")
    },
    // 
    showOpenDetails(item) {
      for(let i = 0;i < this.newsData.length; i++) {
        if (this.newsData[i].order_number == item.order_number) {
          this.$set(this.newsData[i],"showOpenDetails", true)
        } else {
          this.$set(this.newsData[i],"showOpenDetails", false)
        }
      }
    },
    closeOpenDetails (show, index) {
      if (show) {
        this.newsData[index].openDetails = false
        this.isNODetails = false
      } else {
        this.newsData[index].openDetails = true
      }
    },
    uploadSectionFile () {

    },
    // 清楚发送框数据
    closeSend () {
      this.sendMessage = ''
      this.imgListShow = []
      this.fileListShow = []
      this.imgList = []
      this.fileList = []
    },
    // 滚动条置底
    scrollEnd(){
        // const dialogViewport = document.querySelector('.message-warp')
      const dialogViewport = this.$refs['messageWarp']
      const scrollHeight = dialogViewport.scrollHeight
      dialogViewport.scrollTop = scrollHeight
    },
    load() {
      this.page ++
      this.paramsNews.page = this.page,
      this.getData(this.paramsNews, false, true)
    },
  }
}
</script>

<style lang='less' >
  .communication {
    width: 90%;
    min-width: 1500px;
    height: 100%;
    margin: 0 auto;
    padding: 25px 30px;
    background: #fff;
    box-sizing: border-box;
    &-header {
      height: 45px;
      .el-breadcrumb {
        .el-breadcrumb__item {
          .el-breadcrumb__inner,.el-breadcrumb__separator {
            font-size: 25px;
            color:rgba(0,35,151,1);
            font-weight: 400;
          }
        }
        .el-breadcrumb__item:first-child { 
          .el-breadcrumb__inner{
            padding-left: 10px;
            border-left: 5px solid #002397;
          }
        }
        
      }
      border-bottom:2px solid #e5e5e5;
      box-sizing: border-box;
    }
    &-content {
      height: calc(100% - 45px);
      box-sizing: border-box;
      padding: 15px 0 0 0;
      display: flex;
      justify-content:flex-start;

      .content_list {
        // width: 470px;
        min-width: 610px;
        height: 100%;
        flex: 1;
        position: relative;
        .item {
          border-bottom: 2px solid rgba(220,220,220,1);
          position: relative;
          .el-checkbox {
            position:absolute;
            top: 50%;
            transform: translate(0, calc(-50% - 5px));
            .el-checkbox__input {
              .el-checkbox__inner {
                width: 15px;
                height: 15px;
                border-radius: 0px;

                border:1px solid rgba(149,149,149,1);
                background:linear-gradient(180deg,rgba(239,239,239,1) 0%,rgba(229,229,229,1) 100%);
                color: #ededee;
              }
            }
          }
          .is-checked {
            .el-checkbox__inner::after {
              border: 1px solid rgba(0,0,0,1);
              border-left: 0;
              border-top: 0;
            }
          }
        }
        // .item:last-child {
        //   border-bottom: 0;
        // }
        .header {
          height: 55px;
          padding: 0px 0 15px 0;
          box-sizing: border-box;
          
          .el-button {
            border: 1px solid rgba(186,186,186,1);
            border-radius: 5px;
            font-size: 18px;
            padding: 10px 20px;
            color:rgba(186,186,186,1);
            margin-left: 5px;
          }
          .is_activity {
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
          }
          .addBtn {
            background:rgba(88,165,234,1);
            color: #FFF;
            border: 1px solid rgba(88,165,234,1);
          }
        }
        .list {
          height: calc(100% - 120px );
          // height: 100%;
          overflow-y: auto;
          .list_item {
            display: flex;  
            height: 75px;
            position: relative;

            .tag {
              width:8px;
              height:8px;
              background:rgba(191,191,191,1);
              border-radius:50%;
              position:absolute;
              left: 55px;
              top: 50%;
              transform: translate(0, -50%);
            }
            .el-checkbox {
              position:absolute;
              top: 50%;
              transform: translate(0, -50%);
            }
            .time {
              position:absolute;
              top: 50%;
              left: 85px;
              transform: translate(0, -50%);
              font-size:15px;
              color:rgba(52,52,52,1);
            }
            .order_number {
              position:absolute;
              top: 50%;
              left: 180px;

              transform: translate(0, -50%);
              font-size:15px;
              color:rgba(52,52,52,1);
            }
            .info {
              width: 200px;
              line-height: 26px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;

              position:absolute;
              top: 50%;
              left: 360px;
              transform: translate(0, -50%);
              .title {
                font-size: 18px;
                color: #343434;
                font-weight: 700;
              }
              .abstract {
                font-size: 15px;
                color: #a4a4a4;
              }

            }
            .openDetails {
              position:absolute;
              top: 50%;
              // left: 440px;
              right: 20px;
              transform: translate(0, -50%);
              i {
                font-size: 18px;
              }
            }
          }
          .read {
            .tag {
              background:rgba(244,0,0,1);
            }
          }
          .list_item:hover {
            background:rgba(248,248,248,1);
          } 
        }
        .list::-webkit-scrollbar {
          display: none;
        }
        .list::-webkit-scrollbar-thumb {
          background:rgba(191,191,191,1);
        }
        .showScrolbar::-webkit-scrollbar {
          display: block;
        }
        .search {
          width: 100%;
          position: absolute;
          bottom: 0px;
          .el-input {
            max-width: 490px;
            margin-left: 20px;
            font-size: 18px;
            .el-input__inner {
              padding-left: 55px;
              border:1px solid rgba(186,186,186,1);
              border-radius:5px;
            }
            .el-input__prefix {
              left: 20px;
              .el-input__icon {
                font-size: 26px;
              }
            }
          }
        } 
      }
      .content_details {
        // width:calc(100% - 610px);
        flex: 2;
        min-width: 500px;
        height: 100%;
        background:#fff;
        position: relative;
        // padding-top: 15px;
        display: flex;
        flex-direction: column;

        .head {
          background:rgba(239,239,239,1);
          flex: 0 0 55px;
          box-sizing: border-box;
          display: flex;
          justify-content:flex-start;
          line-height: 55px;
          .item {
            color:rgba(78,78,78,1);
            font-size: 20px;
            text-align: center;
            padding: 0 50px;
            cursor: pointer;
            position: relative;

            .noRead {
              position: absolute;
              display:inline-block;
              background: #f40000;
              width: 8px;
              height: 8px;
              right: 30px;
              top: 50%;
              border-radius: 50%;
              transform: translate(0, -50%);
            }
            .isRead {
              position: absolute;
              display:inline-block;
              background:rgba(191,191,191,1);
              width: 8px;
              height: 8px;
              right: 30px;
              top: 50%;
              border-radius: 50%;
              transform: translate(0, -50%);
            }
          }

          .is_active {
            background:rgba(88,165,234,1);
            color: #fff;

            .isRead {
              display: none;
            }
            .noRead {
              display: none;
            }
          }

        }
        .content {
          flex: 1;
          max-height: calc(100% - 225px);
          width: 100%;
          background:rgba(244,244,244,1);
          position: relative;
          box-sizing: border-box;
          .orderInfo-warp {
            width: 100%;
            padding: 10px 50px 0 50px;
            position: absolute;
            top: 0;
          }
          .orderInfo {
            padding: 10px 40px;
            background:rgba(255,255,255,1);
            &_header {
              color:rgba(50,50,50,1);
              font-size: 20px;
              padding-bottom: 10px;
              border-bottom: 1px solid rgba(220,220,220,1);
              
              i {
                cursor: pointer;
              }
            }
            &_noShow {
              line-height: 40px;
              font-size: 15px;
              color:rgba(192,192,192,1);
            }
            .texts {
              font-size:15px;
              color:rgba(192,192,192,1);
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              line-height:25px;
            }
            .textHid {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .message-warp {
            max-height: calc(100% - 121px);
            overflow-y: auto;
            margin-top: 121px;
            padding:20px;

            .item {
              width: 100%;
              padding-top: 15px;
              position: relative;
              margin-bottom: 10px;
              .time {
                position: absolute;
                top: 0;
                left: 50px;
                font-size: 15px;
                color:rgba(180,180,180,1);
              }
              .news {
                border-radius:0 10px 10px 10px;
                padding: 15px 20px;
                background: #fff;
                margin: 8px 50px 0 5px;
                float: left;
                max-width: calc(100% - 100px);
                display:block;
                word-wrap: break-word;
                word-break: normal
              }
              .img {
                border-radius:0 10px 10px 10px;
                padding: 15px 20px;
                background: #fff;
                margin: 8px 50px 0 5px;
                float: left;
              }
              .file {
                border-radius:0 10px 10px 10px;
                padding: 15px 20px;
                background: #fff;
                margin: 8px 50px 0 5px;
                float: left;
                display: block;
                position: relative;

                a {
                  text-decoration: underline;
                }
                .name {
                  font-size: 15px;
                  color:rgba(62,62,62,1);
                  display: inline-block;
                  max-width: 100px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
                .size {
                  position:absolute;
                  left: 20px;
                  bottom: 15px;
                  font-size:12px;
                  color:rgba(205,205,205,1);
                }
                .file_icon {
                  width: 60px;
                  height: 60px;
                  background:rgba(244,244,244,1);
                  line-height: 75px;
                  text-align: center;
                  margin-left: 20px;
                  .icon {
                    font-size: 34px;
                    color: #c7c7c7;
                  }
                }
              }
              .el-avatar {
                
                float: left;
              }
            }
            .right_item {
              .el-avatar {
                // position: absolute;
                // right: 0;
                float: right;
              }
              .time {
                right: 50px;
                left:auto;
              }
              .news {
                border-radius:10px 0px 10px 10px;
                margin: 8px 5px 0 50px;
                float: right;
              }
              .img {
                border-radius:10px 0px 10px 10px;
                margin: 8px 5px 0 50px;
                float: right;
              }
              .file {
                border-radius:10px 0px 10px 10px;
                margin: 8px 5px 0 50px;
                float: right;
              }

            }
          }

          .showorder {
            max-height: calc(100% - 186px);
            margin-top: 186px;
          }
          
        } 
        
        .bottom {
          width: 100%;
          flex: 0 0 160px;
          background:rgba(239,239,239,1);
          overflow-y: auto;

          display: flex;
          flex-direction: column;


          .header {
            color:#bababa;
            padding: 13px 20px;
            flex: 0 0 48px;
            .icon {
              font-size: 20px;
            }
            .upload {
              display: inline-block;
            }
          }
          &_content {
            flex: 1;
            padding: 0 20px;
            overflow-y: auto;
            .imgs {
              display:inline-block;
              margin-right: 10px;
              position: relative;
              width: 100px;
              height: 70px;
              .close {
                z-index: 999;
                position: absolute;
                right: 10px;
                top: 2px;
              }
            }
            .files {
              display:inline-block;
              margin-right: 10px;
              width: 100px;
              height: 100px;
              background: #fff;
              border-radius: 5px;
              position: relative;
              .close {
                position: absolute;
                right: 10px;
                top: 2px;
              }

              .el-icon-document {
                // width: 50px;
                text-align: center;
                display: block;
                font-size: 50px;
                margin: 0 auto 10px;
              }

              .name {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display:inline-block;
                width: 100%;
                padding: 0 10px;
              }
            }
            .el-textarea {
              .el-textarea__inner {
                min-height: 33px;
                background: #efefef;
                resize: none;
                border: none;
              }
            }
          }

          &_bottom {
            flex: 0 0 50px;

            .submit {
              border: 1px solid rgba(76,170,255,1);
              background:rgba(76,170,255,1);
              border-radius: 5px;
              font-size: 15px;
              padding: 5px 20px;
              color:rgba(255,255,255,1);
              margin-left: 3px;
              margin-right: 25px;
            }
          }
          
        }
        
      }
    }
    .noDetails {
      padding-right: 0;
      .content_list {
        width: 100%;
        .list {
          .list_item {
            .openDetails {
              right: 20px;
              left: auto;
            }
            .info {
              width: 550px;
              left: 340px;
            }
            .order_number {
              left: 120px;
            }
            .time {
              right: 80px;
              left: auto;
            }
          }
        }
      }
      .content_details {
        display: none;
      }
    }
    .highilight {
      background: yellow;
    }
  }
</style>